<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>零食超市</title>
    <link rel="icon" href="static/image/bomb2.png" type="image/x-icon"/>
    <link rel="stylesheet" href="static/css/style.css">
    <link rel="stylesheet" href="static/css/bases.css">
    <script src="static/js/axios.min.js"></script>
    <style>
        .active{
            color: rgb(16, 141, 141);
            border-bottom: 2px solid #5EB69C;
        }

        .container {
            position: fixed;
            top: 50%;
            right: 50px;
            transform: translateY(-50%);
        }

        .btn {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 快捷导航 -->
    <div class="shortcut">
        <div class="wrapper">
            <ul>
                <li><a href="login.html" class="login">请先登录</a></li>
                <li><a href="register.html">免费注册</a></li>
                <li><a href="cart.html">我的订单</a></li>
                <li><a href="#">会员中心</a></li>
                <li><a href="#">帮助中心</a></li>
                <li><a href="#">在线客服</a></li>
            </ul>
        </div>
    </div>

    <div class="header wrapper">
        <div class="logo">
            <h1 style="margin: 0;"><a href="#">零食儿</a></h1>
        </div>
        <div class="nav">
            <ul>
                <li><a href="#" class="active">首页</a></li>
                <li><a href="#">零食</a></li>
                <li><a href="#">水果</a></li>
                <li><a href="#">美食</a></li>
                <li><a href="#">手机</a></li>
                <li><a href="#">服装</a></li>
                <li><a href="#">电器</a></li>
                <li><a href="#">洗护</a></li>
                <li><a href="#">居家</a></li>
            </ul>
        </div>
        <div class="search"><input type="text" placeholder="搜一搜">
        </div>
        <div class="car">
            <img src="static/image/car.png">
            <span>2</span>
        </div>
    </div>

    <div class="container">
        <!-- <button class="btn">添加物品</button> -->
    </div>

    <div class="list wrapper">
        <ul>
            <li>
                <a href="#">
                    <div class="pic"><img src="${image}" alt="无"></div>
                    <div class="txt">
                        <h4>${name}</h4>
                        <p>￥<span>${price}</span></p>
                        <p>库存：<span>${inventory}</span></p>
                        <label class="shapping">
                            <button>加入购物车</button>
                        </label>
                    </div>
                </a>
            </li>
        </ul>
    </div>

    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/demo.js"></script>
    <script>
        function addButton(){
            // 获取所有的 "加入购物车" 按钮元素
            var addToCartButtons = document.querySelectorAll('.shapping button');

            // 为每个按钮添加点击事件监听器
            addToCartButtons.forEach(function(button) {
                button.addEventListener('click', function(event) {
                    // 阻止默认的按钮点击事件
                    event.preventDefault();
                    // 获取当前点击的按钮所在的商品信息
                    var currentItem = event.target.closest('li');

                    // 在控制台中输出当前商品的信息
                    const divList = currentItem.querySelectorAll('div');
                    const image = divList[0].querySelector('img').src;
                    const price = divList[1].querySelector('p span').innerHTML;
                    const name = divList[1].querySelector('h4').innerHTML;
                    const item = {imgUrl: image, proName: name, proPrice: price}

                    carData.push(item);
                    localStorage.setItem('cart', JSON.stringify(carData));
                    console.log(localStorage)
                });
            });
        }

        const username = getCookieValue("username")
        if(username){
            $('.shortcut li a')[0].innerHTML=username
            $('.shortcut li a')[0].href='#'
            $('li')[0].style.color= 'aqua'
            $('.shortcut li a')[1].innerHTML='退出'
            $('.shortcut li a')[1].href='logout'
        }

        var category_id = 0;
        let carData = [];

        document.querySelector('.car').addEventListener('click', function(e){
            window.location.href='cart.html'
        })

        var searchInput = document.querySelector('.search input')
        searchInput.addEventListener('keydown', function(event) {
            if (event.keyCode === 13 || event.key === 'Enter') {
                event.preventDefault(); 
                var content = this.value;
                axios({
                    url: 'http://localhost:8080/snack-sale/search',
                    method: 'GET',
                    params: {
                        category_id,
                        content
                    }
                }).then(result => {
                    const list = result.data.data
                    console.log(result)
                    console.log(list)
                    let str = ''

                    // 将 JSON 字符串解析为 JavaScript 对象或数组
                    const data = JSON.parse(list);

                    // 将对象转换为数组
                    const dataArray = Array.from(data);

                    dataArray.forEach(item => {
                        const {name, price, image, inventory} = item
                        str += `
                        <li>
                            <a href="#">
                                <div class="pic"><img src="${image}" alt="无"></div>
                                <div class="txt">
                                    <h4>${name}</h4>
                                    <p>￥<span>${price}</span></p>
                                    <p>库存：<span>${inventory}</span></p>
                                    <label class="shapping">
                                        <button>加入购物车</button>
                                    </label>
                                </div>
                            </a>
                        </li>
                        `
                    })
                    document.querySelector('.list ul').innerHTML=str
                    addButton();
                })
            }
        });

        document.querySelector('.nav ul').addEventListener('click', (e) => {
            if(e.target.nodeName === 'A'){
                document.querySelector('.active').classList.remove('active')
                e.target.classList.add('active')
                const name = e.target.innerHTML
                if( name === '水果'){
                    category_id = 2
                    axios({
                        url: 'http://localhost:8080/snack-sale/fruit',
                        method: 'GET'
                    }).then(result => {
                        const list = result.data.data
                        let str = ''

                        // 将 JSON 字符串解析为 JavaScript 对象或数组
                        const data = JSON.parse(list);

                        // 将对象转换为数组
                        const dataArray = Array.from(data);

                        dataArray.forEach(item => {
                            const {name, price, image, inventory} = item
                            str += `
                            <li>
                                <a href="#">
                                    <div class="pic"><img src="${image}" alt="无"></div>
                                    <div class="txt">
                                        <h4>${name}</h4>
                                        <p>￥<span>${price}</span></p>
                                        <p>库存：<span>${inventory}</span></p>
                                        <label class="shapping">
                                            <button>加入购物车</button>
                                        </label>
                                    </div>
                                </a>
                            </li>
                            `
                        })
                        document.querySelector('.list ul').innerHTML=str
                        addButton();
                    })
                }else if(name === '美食'){
                    document.querySelector('.list ul').innerHTML=''
                    // category_id = 2
                    // axios({
                    //     url: 'http://localhost:8080/snack',
                    //     method: 'GET'
                    // }).then(result => {
                    //     const list = result.data.data
                    //     let str = ''
                    //
                    //     // 将 JSON 字符串解析为 JavaScript 对象或数组
                    //     const data = JSON.parse(list);
                    //
                    //     // 将对象转换为数组
                    //     const dataArray = Array.from(data);
                    //
                    //     dataArray.forEach(item => {
                    //         const {name, price, image} = item
                    //         str += `
                    //         <li>
                    //             <a href="#">
                    //                 <div class="pic"><img src="${image}" alt="无"></div>
                    //                 <div class="txt">
                    //                     <h4>${name}</h4>
                    //                     <p>￥<span>${price}</span></p>
                    //                     <label class="shapping">
                    //                     <button>加入购物车</button>
                    //                 </label>
                    //                 </div>
                    //             </a>
                    //         </li>
                    //         `
                    //     })
                    //     document.querySelector('.list ul').innerHTML=str
                    //     addButton();
                    // })
                }
                else if(name === '零食'){
                    category_id = 1
                    axios({
                        url: 'http://localhost:8080/snack-sale/snack',
                        method: 'GET'
                    }).then(result => {
                        const list = result.data.data
                        let str = ''

                        // 将 JSON 字符串解析为 JavaScript 对象或数组
                        const data = JSON.parse(list);

                        // 将对象转换为数组
                        const dataArray = Array.from(data);

                        dataArray.forEach(item => {
                            const {name, price, image, inventory} = item
                            str += `
                            <li>
                                <a href="#">
                                    <div class="pic"><img src="${image}" alt="无"></div>
                                    <div class="txt">
                                        <h4>${name}</h4>
                                        <p>￥<span>${price}</span></p>
                                        <p>库存：<span>${inventory}</span></p>
                                        <label class="shapping">
                                            <button>加入购物车</button>
                                        </label>
                                    </div>
                                </a>
                            </li>
                            `
                        })
                        document.querySelector('.list ul').innerHTML = str
                        addButton();
                    })
                }
                else if(name === '首页'){
                    axios({
                        url: 'http://localhost:8080/snack-sale/snack',
                        method: 'GET'
                    }).then(result => {
                        const list = result.data.data
                        let str = ''

                        // 将 JSON 字符串解析为 JavaScript 对象或数组
                        const data = JSON.parse(list);
                        
                        console.log(list)
                        // 将对象转换为数组
                        const dataArray = Array.from(data);

                        dataArray.forEach(item => {
                            const {name, price, image, inventory} = item
                            str += `
                            <li>
                                <a href="#">
                                    <div class="pic"><img src="${image}" alt="无"></div>
                                    <div class="txt">
                                        <h4>${name}</h4>
                                        <p>￥<span>${price}</span></p>
                                        <p>库存：<span>${inventory}</span></p>
                                        <label class="shapping">
                                            <button>加入购物车</button>
                                        </label>
                                    </div>
                                </a>
                            </li>
                            `
                        })
                        document.querySelector('.list ul').innerHTML=str
                        addButton();
                    })
                }else{
                    document.querySelector('.list ul').innerHTML=''
                }
            }
        })
        
        axios({
            url: 'http://localhost:8080/snack-sale/snack',
            method: 'GET'
        }).then(result => {
            const list = result.data.data
            let str = ''

            // 将 JSON 字符串解析为 JavaScript 对象或数组
            const data = JSON.parse(list);

            // 将对象转换为数组
            const dataArray = Array.from(data);

            dataArray.forEach(item => {
                const {name, price, image, inventory} = item
                str += `
                <li>
                    <a href="#">
                        <div class="pic"><img src="${image}" alt="无"></div>
                        <div class="txt">
                            <h4>${name}</h4>
                            <p>￥<span>${price}</span></p>
                            <p>库存：<span>${inventory}</span></p>
                            <label class="shapping">
                                <button>加入购物车</button>
                            </label>
                        </div>
                    </a>
                </li>
                `
            })
            document.querySelector('.list ul').innerHTML=str
            addButton();
        });
        
        // document.querySelector('.container button').addEventListener('click', () => {
        //     window.location.href='upload.jsp'
        // })
    </script>
</body>
</html>